<template>
  <div class="articleList">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onRefresh">
      <!-- 文章列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-item v-for="(item,index) in list" :key="index" :articleData="item"></article-item>
        <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.title" /> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 引入请求文件
import { getArticle } from "@/api/axios";
import ArticleItem from "@/components/article/article-item";
export default {
  name: "articleList",
  components: { ArticleItem },
  props: {
    channel: {
      type: Object, //声明对象
      required: true, //必须有，，否则报错
    },
  },
  data() {
    return {
      list: [], //渲染数据列表
      loading: false, //控制加载中的状态
      finished: false, //控制结束加载的状态
      timestamp: null, //请求数据的时间戳。相当于页码
      error: false, //控制失败的提示
      isRefreshLoading: false, //控制下拉刷新的状态
    };
  },
  methods: {
    async onLoad() {
      // 实现步骤
      // 1.请求数据
      try {
        const { data: res } = await getArticle({
          channel_id: this.channel.id, //当前tabs导航的id值
          timestamp: this.timestamp || Date.now(), //当前时间戳===按照时间来加载不同内容
          with_top: 1, //是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        });

        // 模拟出错的
        // if (Math.random() > 0.5) {
        //   JSON.parse("模拟出错");
        // }

        // 将里面的results解构出来
        const { results } = res.data;
        // 2.将数据放到list中
        this.list.push(...results);
        // 3.结束加载中状态 加载状态结束
        this.loading = false;
        // 4.判断请求到的results数据是否还有。有则添加到list中，。无则结束加载
        if (results.length) {
          // 更新获取下一页的时间戳
          this.timestamp = res.data.pre_timestamp;
        } else {
          // 为真时结束请求加载
          this.finished = true;
        }
      } catch (err) {
        // this.$toast.fail("获取失败！");
        // 结束加载中状态 加载状态结束
        this.loading = false;
        //  展示错误提示信息
        this.error = true;
      }
    },
    // 下拉刷新时，会触发
    async onRefresh() {
      try {
        //1.请求数据
        const { data: res } = await getArticle({
          channel_id: this.channel.id,
          //当前时间戳===这里只需要最新的数据
          timestamp: Date.now(),
          with_top: 1,
        });

        // if (Math.random() > 0.2) {
        //   JSON.parse("模拟出错");
        // }
        //2.将新的数据放在前面显示
        const { results } = res.data;
        this.list.unshift(...results);
        this.$toast(`更新了${results.length}条数据`);
        //3.关闭下拉刷新状态
        this.isRefreshLoading = false;
      } catch (err) {
        this.loading = false;
        this.$toast.fail("获取失败！");
        this.isRefreshLoading = false;
      }
    },
  },
};
</script>

<style scoped lang= 'less'>
.articleList {
  height: 79vh;
  overflow-y: auto;
}
</style>